﻿<template>
	<transition name="el-zoom-in-center">
		<div class="SHZY-preview-main">
			<div class="SHZY-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : '编辑'" />
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<div :style="{ margin: '0 auto', width: '100%' }">
				<el-row :gutter="15" class=" main">
					<el-form ref="elForm" :model="dataForm" size="small" label-width="110px" label-position="right"
						:rules="rules">
						<el-col :span="24">
							<el-form-item label="规则编码" prop="code">
								<el-input v-model='dataForm.code' placeholder='请输入' clearable required
									:style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="规则描述" prop="desc">
								<el-input v-model='dataForm.desc' placeholder='请输入' clearable required
									:style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="有效开始时间" prop="startDate">
								<el-date-picker v-model='dataForm.startDate' placeholder='请选择' clearable required
									:style='{ "width": "100%" }' type='datetime' format='yyyy-MM-dd HH:mm:ss'
									value-format='timestamp'>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="有效结束时间" prop="endDate">
								<el-date-picker v-model='dataForm.endDate' placeholder='请选择' clearable required
									:style='{ "width": "100%" }' type='datetime' format='yyyy-MM-dd HH:mm:ss'
									value-format='timestamp'>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="有效标志" prop="enabledMark">
								<el-switch v-model='dataForm.enabledMark' :active-value='1' :inactive-value='0'>
								</el-switch>
							</el-form-item>
						</el-col>
					</el-form>
					<div class="SHZY-common-title" style="padding:0 10px;">
						<h2>阶段信息</h2>
					</div>
					<el-form ref="tableForm" :model="dataForm" :rules="tableRules">
						<el-table v-loading="listLoading" :data="dataForm.children" size='mini' ref="dragTable"
							:row-key="row => row.index">
							<el-table-column type="index" width="50" label="序号" align="center" />
							<el-table-column prop="stage" label="阶段" min-width="100" :render-header="addRedStar">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.stage'" :rules="tableRules.stage">
										<el-input v-model="scope.row.stage" placeholder="阶段" maxlength="50" />
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="stageDesc" label="阶段描述" min-width="150" :render-header="addRedStar">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.stageDesc'"
										:rules="tableRules.stageDesc">
										<el-input v-model="scope.row.stageDesc" placeholder="阶段描述" maxlength="50" />
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="judeCondition" label="条件" min-width="100">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.judeCondition'"
										:rules="tableRules.judeCondition">
										<el-select v-model="scope.row.judeCondition" placeholder="条件">
											<el-option v-for="(item, index) in judeConditionOptions" :key="index"
												:label="item.fullName" :value="item.id"></el-option>
										</el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="continuityDay" label="连续天数" min-width="100" :render-header="addRedStar">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.continuityDay'"
										:rules="tableRules.continuityDay">
										<el-input v-model="scope.row.continuityDay" placeholder="连续天数" maxlength="50" />
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="keyWord" label="批次关系" min-width="140">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.keyWord'"
										:rules="tableRules.keyWord">
										<el-radio-group v-model='scope.row.keyWord' size='small'>
											<el-radio-button v-for="(item, index) in keyWordOptions" :key="index"
												:label="item.id">{{ item.fullName }}</el-radio-button>
										</el-radio-group>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="inspLot" label="合格数" min-width="100" :render-header="addRedStar">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.inspLot'"
										:rules="tableRules.inspLot">
										<el-input v-model="scope.row.inspLot" placeholder="合格数" maxlength="50" />
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="okStageNo" label="新阶段" min-width="150">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.okStageNo'"
										:rules="tableRules.okStageNo">
										<el-select v-model='scope.row.okStageNo' placeholder='请选择新阶段' clearable
											:style='{ "width": "100%" }'>
											<el-option v-for="(item, index) in dataForm.children" :key="index"
												:label="item.stageDesc" :value="item.stage"></el-option>
										</el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="rejectNun" label="拒绝" min-width="100" :render-header="addRedStar">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.rejectNun'"
										:rules="tableRules.rejectNun">
										<el-input v-model="scope.row.rejectNun" placeholder="拒绝" maxlength="50" />
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="ngStageNo" label="NG新阶段" min-width="150">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.ngStageNo'"
										:rules="tableRules.ngStageNo">
										<el-select v-model='scope.row.ngStageNo' placeholder='请选择NG新阶段' clearable
											:style='{ "width": "100%" }'>
											<el-option v-for="(item, index) in dataForm.children" :key="index"
												:label="item.stageDesc" :value="item.stage"></el-option>
										</el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="isDefault" label="初始阶段" min-width="110">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.isDefault'"
										:rules="tableRules.isDefault">
										<el-radio-group v-model='scope.row.isDefault' size='small'>
											<el-radio-button v-for="(item, index) in isDefaultOptions" :key="index"
												:label="item.id">{{ item.fullName }}</el-radio-button>
										</el-radio-group>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="isExempt" label="免检" min-width="110">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.isExempt'"
										:rules="tableRules.isExempt">
										<el-radio-group v-model='scope.row.isExempt' size='small'>
											<el-radio-button v-for="(item, index) in isExemptOptions" :key="index"
												:label="item.id">{{ item.fullName }}</el-radio-button>
										</el-radio-group>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="enabledMark" label="有效标志" min-width="140">
								<template slot-scope="scope">
									<el-form-item :prop="'children.' + scope.$index + '.enabledMark'"
										:rules="tableRules.enabledMark">
										<el-radio-group v-model='scope.row.enabledMark' size='small'>
											<el-radio-button v-for="(item, index) in enabledMarkOptions" :key="index"
												:label="item.id">{{ item.fullName }}</el-radio-button>
										</el-radio-group>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="50" fixed="right">
								<template slot-scope="scope">
									<el-button class="SHZY-table-delBtn" size="mini" type="text"
										@click="handleDel(scope.$index, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form>
					<div class="table-actions" @click="addHandle()">
						<el-button type="text" icon="el-icon-plus">新建阶段</el-button>
					</div>
				</el-row>
			</div>
		</div>
	</transition>
</template>
<script>
import { getInspectionroleInfo, submitInspectionrole, updateInspectionrole } from '@/api/q1/basedata/inspectionRole'

export default {
	components: {},
	props: [],
	data() {
		const validatePass = (rule,value,callback)=>{
				if(!value || value.trim().length == 0){
					callback(new Error("不能为空"));
				}else if(value.trim().length > 100){
					callback(new Error("长度不能超过100字"));
				}else{
					callback();
				}
			};
			const validatePassDate = (rule,value,callback)=>{
				if(!value){
					callback(new Error("不能为空"));
				}else if(this.dataForm.startDate >= this.dataForm.endDate){
					callback(new Error("开始时间必须小于结束时间"));
				}else{
					callback();
				}
			};
		return {
			btnLoading: false,
			loading: false,
			visible: false,
			dataForm: {
				id: '',
				code: undefined,
				desc: undefined,
				startDate: undefined,
				endDate: undefined,
				enabledMark: 1,
				children: []
			},
			rules: {
				code: [
					{
						required: true,
						validator: validatePass,
						trigger: '"blur"'
					},
				],
				desc: [
					{
						required: true,
						validator: validatePass,
						trigger: '"blur"'
					},
				],
				startDate: [
					{
						required: true,
						//message: '请选择有效开始时间',
						validator: validatePassDate,
						trigger: '"change"'
					},
				],
				endDate: [
					{
						required: true,
						//message: '请选择有效结束时间',
						validator: validatePassDate,
						trigger: '"change"'
					},
				],
			},
			tableRules: {
				stage: [{ required: true, message: '请输入阶段', trigger: '"blur"' },],
				stageDesc: [{ required: true, message: '请输入阶段描述', trigger: '"blur"' },],
				judeCondition: [{ required: true, message: '请输入条件', trigger: '"blur"' },],
				continuityDay: [
					{ required: true, message: '请输入连续天数', trigger: '"blur"' },
					{ pattern: /^\d+$/, message: '请输入非负整数', trigger: 'blur' }
				],
				keyWord: [{ required: true, message: '请输入批次关系', trigger: '"blur"' },],
				inspLot: [
					{ required: true, message: '请输入合格数', trigger: '"blur"' },
					{ pattern: /^\d+$/, message: '请输入非负整数', trigger: 'blur' }
				],
				// okStageNo: [{ required: true, message: '请输入新阶段', trigger: '"blur"' },],
				rejectNun: [
					{ required: true, message: '请输入拒绝', trigger: '"blur"' },
					{ pattern: /^\d+$/, message: '请输入非负整数', trigger: 'blur' }
				],
				// ngStageNo: [{ required: true, message: '请输入NG新阶段', trigger: '"blur"' },],
				isDefault: [{ required: true, message: '请输入初始阶段', trigger: '"blur"' },],
				isExempt: [{ required: true, message: '请输入免检', trigger: '"blur"' },],
				enabledMark: [{ required: true, message: '请输入有效标志', trigger: '"blur"' },]
			},
			listLoading: false,
			judeConditionOptions: [{ 'fullName': "=", 'id': "=" }, { 'fullName': "<", 'id': "<" }, { 'fullName': ">", 'id': ">" }, { 'fullName': ">=", 'id': ">=" }, { 'fullName': "<=", 'id': "<=" }],
			keyWordOptions: [{ 'fullName': "并且", 'id': "and" }, { 'fullName': "或者", 'id': "or" }],
			isDefaultOptions: [{ 'fullName': "否", 'id': "0" }, { 'fullName': "是", 'id': "1" }],
			isExemptOptions: [{ 'fullName': "否", 'id': "0" }, { 'fullName': "是", 'id': "1" }],
			enabledMarkOptions: [{ 'fullName': "正常", 'id': "1" }, { 'fullName': "停用", 'id': "0" }],
		}
	},
	computed: {},
	watch: {},
	created() {
	},
	mounted() {
	},
	methods: {
		addRedStar(h, { column }) {
			return [
				h("span", { style: "color: red" }, "*"),
				h("span", " " + column.label),
			];
		},
		goBack() {
			this.$emit('refresh')
		},
		init(id) {
			this.dataForm.id = id || "";
			this.visible = true;
			this.$nextTick(() => {
				this.$refs['elForm'].resetFields();
				if (this.dataForm.id) {
					getInspectionroleInfo(this.dataForm.id).then(res => {
						this.dataForm = res.data;
					})
				}
			});
			//this.$store.commit('generator/UPDATE_RELATION_DATA', {})
		},
		handleDel(index, row) {
			this.dataForm.children.splice(index, 1)
		},
		addHandle(row) {
			let index = this.dataForm.children.length, item = {}
			item = {
				id: undefined,
				mainId: this.dataForm.id,
				stage: undefined,
				stageDesc: undefined,
				judeCondition: "=",
				continuityDay: 1,
				keyWord: "and",
				inspLot: 1,
				okStageNo: undefined,
				rejectNun: 0,
				ngStageNo: undefined,
				isDefault: "0",
				isExempt: "0",
				enabledMark: 1,
				index
			}
			this.dataForm.children.push(item)
		},
		dataFormSubmit() {
			this.$refs['elForm'].validate((valid) => {
				if (valid) {
					if (this.dataForm.children.length == 0) {
						this.$message({
							message: "请添加阶段信息",
							type: 'error',
							duration: 1000
						})
						return;
					}
					this.$refs['tableForm'].validate((valid) => {
						if (valid) {
							this.btnLoading = true;
							submitInspectionrole(this.dataForm).then((res) => {
								this.$message({
									message: res.msg,
									type: 'success',
									duration: 1000,
									onClose: () => {
										this.btnLoading = false;
										this.visible = false,
											this.$emit('refresh', true)
									}
								})
							}).catch((res) => {
								this.btnLoading = false;
							})
						}
					});

				}
			})
		},
	}
}
</script>
